<template>
	<view class="page">
		<headerVue :title="title"></headerVue>

		<view class="banner margin20">
			<view class="inner flex-between flex-column align-center padding-column40">
				<text style="line-height: 1; color: rgba(255,255,255,0.6);">参与金额</text>
				<view class="flex align-center padding-row40">
					<input type="text" :placeholder="placeholder" v-model="quantity"/>
					<view class="label">USDT</view>
				</view>
			</view>

			<view class="btnVue flex-between margin40">
				<view class="btn" :class="{active: current===1}" @click="changeCurrent(1)">30天</view>
				<view class="btn" :class="{active: current===2}" @click="changeCurrent(2)">90天</view>
				<view class="btn" :class="{active: current===3}" @click="changeCurrent(3)">180天</view>
				<view class="btn" :class="{active: current===4}" @click="changeCurrent(4)">360天</view>
			</view>

			<view class="flex-between margin50">
				<text style="line-height: 1; color: rgba(255,255,255,0.6);">预估收益</text>
				<text style="line-height: 1; color: #fff;">≈{{ income }}%</text>
			</view>

			<image src="../../static/K6.png" style="width: 100%; height: 102rpx; margin-top: 50rpx;" @click="buy()"></image>
		</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">购买记录</view>
		</view>

    <view class="thVue flex margin40 padding-row30">
      <view class="li w50">购买时间</view>
      <view class="li w20 text-center">金额</view>
      <view class="li text-right w30">到期时间</view>
    </view>
    <view class="tdVue flex padding-row30 margin0" v-for="(item, index) in list" :key="index">
      <view class="li w50">{{item.createTime}}</view>
      <view class="li w20 text-center">{{item.amount}}</view>
      <view class="li text-right w30">{{item.endDate}}</view>
    </view>

		<u-popup v-model="isBand" mode="center">
			<view class="langVue flex-between flex-column">
				<view class="lang flex-between flex-column align-center">
					<view class="title text-center">绑定上级地址</view>
					<input v-model="link"/>
					<view class="btn" @click="bandFun()">
						<image src="../../static/confirm.png" style="width: 100%; height: 100%;"></image>
					</view>
				</view>
				<view class="closeVue flex-center align-center" @click="isBand=false">
					<image src="../../static/close.png" style="width: 58rpx; height: 58rpx;"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				productType: "",
				quantity: "",
				current: 1,
				income: 6,
				list: [],
				title: "",
				placeholder: "",
				isBand: false,
				link: ""
			}
		},
		async onLoad(option) {
			this.productType = option.value
			if(this.productType==1) this.placeholder = "100~10000"
			if(this.productType==2) this.placeholder = "10000~100000"
			if(this.productType==3) this.placeholder = "100000~1000000"
			this.title = ["体验产品", "稳健产品", "激进产品"][this.productType-1]
			await this.getList()
		},
		methods: {
			changeCurrent(index){
				console.log(this.productType, index)
				if(this.productType==1) { //体验版
					if(index>1) return this.$u.toast("体验版只能购买30天")
				}
				if(this.productType==2) { //体验版
					if(index>3) return this.$u.toast("体验版不能购买360天")
				}
				this.current = index;
        if (index === 1) {
          this.income = 0.2 * 30;
        } else if (index === 2) {
          this.income = 0.3 * 90;
        } else if (index === 3) {
          this.income = 0.4 * 180;
        } else {
          this.income = 0.5 * 360;
        }
			},
			async buy(){
				if(this.quantity==0 || !this.quantity) return this.$u.toast("请输入正确数量")
				if(this.productType==1 && (this.quantity<100 || this.quantity>10000)) return this.$u.toast("请输入正确数量")
				if(this.productType==2 && (this.quantity<10000 || this.quantity>100000)) return this.$u.toast("请输入正确数量")
				if(this.productType==3 && (this.quantity<100000 || this.quantity>1000000)) return this.$u.toast("请输入正确数量")
				const res = await this.$request("/front/financial/buy", {
					productType: this.productType,
					period: this.current,
					amount: this.quantity
				})
				console.log(res.code)
				if(res.code===0) {
					this.$u.toast("购买成功")
					this.quantity = ""
					this.getList()
				}else {
					if(res.code===-4) {
            this.isBand = true
          } else {
					  this.$u.toast(res.msg)
          }
				}
			},
			async getList(){
				const res = await this.$request("/front/financial/orderList")
				if(res.code===0) {
					this.list = res.data
				}
			},
			async bandFun(){
				if(!this.link) return this.$u.toast("请输入邀请码")
				const res = await this.$request("/front/user/bindLeader", {
					address: this.link
				})
				if(res.code===0) {
					this.$u.toast("绑定成功")
					this.isBand = false
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}
	/deep/.u-drawer-left {
		background-color: transparent !important;
	}
	.banner {
		width: 670rpx;
		height: 730rpx;
		background: url("../../static/K3.png") no-repeat;
		background-size: 100% 100%;
		padding: 90rpx 37rpx 100rpx;
		.inner {
			width: 100%;
			height: 194rpx;
			border-radius: 20rpx;
			border: 1rpx solid #45F882;
			.label {
				font-weight: 600;
				font-size: 32rpx;
				color: #45F882;
			}
			input {
				flex: 1;
				font-size: 32rpx;
				color: #fff;
			}
		}
		.btnVue {
			width: 100%;
			height: 72rpx;
			.btn {
				width: 134rpx;
				height: 72rpx;
				background: url("../../static/K4.png") no-repeat;
				background-size: 100% 100%;
				color: rgba(255,255,255,0.5);
				text-align: center;
				line-height: 72rpx;
			}
			.active {
				background: url("../../static/K5.png") no-repeat;
				background-size: 100% 100%;
				color: #FCFF24;
			}
		}
	}

	.titleVue {
		width: 100%;
		padding: 40rpx 0 0 30rpx;
		.dot {
			width: 4rpx;
			height: 30rpx;
			background: #45F882;
		}
		.title {
			font-weight: 600;
			padding-left: 20rpx;
			line-height: 1;
			font-size: 32rpx;
		}
	}

	.thVue {
		width: 670rpx;
		height: 78rpx;
		background: rgba(255,255,255,0.1);
		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255,255,255,0.6);
		}
	}

	.tdVue {
		width: 670rpx;
		height: 78rpx;
		.li {
			//width: 33.33333%;
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255,255,255,0.6);
		}
	}

	.tdVue:nth-child(2n) {
		background: rgba(255,255,255,0.03);;
	}

	.langVue {
		width: 670rpx;
		height: 682rpx;
		padding: 52rpx 0 80rpx;
		box-sizing: border-box;
		.lang {
			width: 670rpx;
			height: 402rpx;
			background: url("../../static/lang_kuang.png") no-repeat;
			background-size: 100% 100%;
			padding: 60rpx 0 90rpx;
			.title {
				font-size: 32rpx;
				font-weight: 600;
			}
			input {
				width: 540rpx;
				height: 80rpx;
				background: #06100B;
				border-radius: 8rpx;
				border: 1rpx solid #4C5B51;
				display: block;
				box-sizing: border-box;
				text-align: center;
				color: #45F882;
			}
			.btn {
				width: 260rpx;
				height: 62rpx;
				background: transparent;
			}
		}


		.closeVue {
			width: 100%;
			height: 100rpx;
		}
	}
</style>
